<template>
  <continer
    :showPage="showPage"
    :shadow="true"
    :pageshadow="true"
    :isNoTabs="true"
  >
    <template slot="search">
      <QuickSearch
        :advForm="quickSearchForm"
        @QuickSearch="handleSearchFun"
      ></QuickSearch>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="handleSearchFun"
        >查询</el-button
      >
    </template>
    <template slot="content">
      <instiutionTable
        ref="tableRef"
        @currentChange="currentChangeFun"
        @sizeChange="sizeChange"
        :pages="tablePages"
        :instiutionTableData="tableData"
        :instiutionTableHeader="tableHeader"
      >
        <template #serviceProjectId="{ scope }">
          <span
            @click.stop="jumpServiceItemDetail(scope.row)"
            v-if="allServiceObj[scope.row.serviceProjectId]"
            class="jump-page"
            >{{ allServiceObj[scope.row.serviceProjectId].name }}</span
          >
        </template>
        <template #ticketNo="{ scope }">
          <span @click.stop="jumpServiceDetail(scope.row)" class="jump-page">{{
            scope.row.ticketNo
          }}</span>
        </template>
        <template #customerName="{ scope }">
          <span @click.stop="jumpCustomerDetail(scope.row)" class="jump-page">{{
            scope.row.customerName
          }}</span>
        </template>
      </instiutionTable>
       <el-drawer
        title="工单详情"
        custom-class="m7-drawer my-drawer history-order-dialog"
        size="800px"
        :append-to-body="true"
        :visible.sync="dialogVisible"
      >
      <editBusiness :noBorder="true" :checkRead="false" :isOnlyShow="true" :agentList="agentListArr" ref="editBusiness1">
      </editBusiness>
    </el-drawer>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import QuickSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import instiutionTable from '@/common/views/institutionTable/institutionTable.vue'
import { CommonModule } from '@/store/modules/common'
import { commonAction } from '@/utils/common'
import editBusiness from '../../business/components/editBusiness.vue'
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash';
@Component({
  name: 'ServiceItemRecord',
  components: {
    QuickSearch,
    continer,
    instiutionTable,
    editBusiness
  }
})
export default class Category extends Vue {
  private $confirm: any
  private $message: any
  private $router: any
  private $getCache: any

  private showPage: boolean = false

  private tableData: any = [] // 表格数据

  private allServiceItemObj: any = {} // 以id为key的所有品类的数据
  private dialogVisible = false

  private tableHeader: any[] = [ // 表头
    {
      label: '服务项目',
      prop: 'serviceProjectId',
      custom: true
    },
    {
      label: '关联工单',
      prop: 'ticketNo',
      custom: true
    },
    {
      label: '关联客户',
      prop: 'customerName',
      custom: true
    },
    { label: '价格', prop: 'price' },
    { label: '使用数量', prop: 'count' },
    { label: '工单创建时间', prop: 'createTicketTime' }
  ]

  private get allServiceObj () {
    return this.allServiceItemObj
  }

  private get agentListArr () {
    const agents = cloneDeep(CommonModule.publicCache.userListObj)
    const agentsArr: any = []
    for (const i in agents) {
      agentsArr.push({ key: agents[i]._id, label: agents[i].name })
    }
    return agentsArr
  }

  private jumpServiceDetail (row) {
    this.dialogVisible = true
    row.id = row.ticketId
    this.$nextTick(() => {
      (this.$refs.editBusiness1 as any).getBusinessDataById(row)
    })
  }

  private jumpServiceItemDetail (row) {
    this.$router.push({ path: '/service_item/index/service_item_category', query: { serviceProjectId: row.serviceProjectId } })
  }

  private jumpCustomerDetail (row) {
    this.$router.push({ path: '/customer_workbench/index', query: { customerId: row.customerId } })
  }

  private tablePages = { // 表格分页
    current: 1,
    pageSize: 10,
    total: 100
  }

  private quickSearchForm = { // 快捷检索数据
    form: {
      serviceProjectName: '',
      customerName: '',
      ticketId: '',
      createTime: []
    },
    advSearchOptions: [
      { label: '服务项目', inputType: 'input', placeholder: '请输入', name: 'serviceProjectName', clearable: true },
      { label: '关联工单', inputType: 'input', placeholder: '请输入', name: 'ticketId', clearable: true },
      { label: '关联客户', inputType: 'input', placeholder: '请输入', name: 'customerName', clearable: true },
      { label: '工单创建时间', inputType: 'dateTimeRange', clearable: true, name: 'createTime' }
    ]
  }

  private currentChangeFun (page: number) { // 翻页
    this.tablePages.current = page
    this.getTableList()
  }

  private sizeChange (size: number) {
    this.tablePages.pageSize = size
    this.getTableList()
  }

  private handleSearchFun () { // 搜素
    this.tablePages.current = 1
    this.getTableList()
  }

  private getTableList () { // 获取表格数据
    const { customerName, ticketId, serviceProjectName, createTime } = this.quickSearchForm.form
    const sendData = {
      limit: this.tablePages.pageSize,
      page: this.tablePages.current,
      customerName,
      ticketId,
      serviceProjectName,
      createTicketTimeStart: createTime && createTime[0],
      createTicketTimeEnd: createTime && createTime[1]
    }
    commonAction({
      url: '/server-work/action/serviceRecord/list',
      method: 'post',
      data: sendData
    }).then(res => {
      if (res.success) {
        this.tableData = res.data ? res.data.list : []
        this.tablePages.total = res.data && res.data.count
      }
    })
  }

  private getAllData () { // 获取全部品类
    commonAction({
      url: '/server-work/action/serviceProject/query',
      method: 'post'
    }).then(res => {
      if (res.success) {
        res.data.serviceItemList.forEach(item => {
          this.allServiceItemObj[item.id] = JSON.parse(JSON.stringify(item))
        })
      }
    })
  }

  private mounted () {
    this.getAllData()
    this.getTableList()
  }
}
</script>
<style lang="stylus" scoped>
.jump-page
  color $c-main
  cursor pointer
</style>
